<template>
	<view class="pages">
		<!-- 导航栏 -->
		<view class="nav-bar">
			<view class="nav-bar-content">
				<view class="nav-bar-content-back">
					<u-icon name="arrow-leftward" size="48rpx" @tap="goback"></u-icon>
					<text class="nav-bar-content-back-title">最近播放</text>
				</view>


				<view class="nav-bar-content-bottom">
					<u-button type="primary" size="mini" text="黑胶时光机" shape="circle" class="custom-style"></u-button>
				</view>
			</view>
		</view>
		<!-- 切换条 -->
		<view class="tabs-active">
			<view class="tabs-content">
				<u-tabs :list="tabs" @click="change" :current="current" lineWidth="20"
					itemStyle="padding-left: 20px; padding-right: 15px; height: 34px;">
				</u-tabs>
			</view>
		</view>


		<swiper :current="current" @change="changCurrent" class="swiper-info">

			<!-- 单曲 -->
			<swiper-item>
				<Single :searchmsg="tabs[0].list"></Single>
			</swiper-item>

			<!-- 视频 -->
			<swiper-item>
				<VodioList :video="tabs[1].list"></VodioList>
			</swiper-item>

			<!-- 歌单 -->
			<swiper-item>
				<SongList :songlist="tabs[2].list"></SongList>
			</swiper-item>

			<!-- 专辑 -->
			<swiper-item>
				<Album :albums="tabs[3].list"></Album>
			</swiper-item>

			<!-- 播客 -->
			<swiper-item>
				<Broad :radio="tabs[4].list"></Broad>
			</swiper-item>
		</swiper>

		<view class="">
			<play></play>
		</view>
	</view>
</template>
<script>
	// 引入组件
	import play from '@/components/plays.vue';
	import BroadList from '@/view/BroadList/BroadList.vue';
	import Single from '@/view/Single/Single.vue';
	import SongList from '@/view/SongList/SongList.vue';
	import VodioList from '@/view/VudioList/VudioList.vue';
	import AristList from '@/view/AristList/AristList.vue';
	import Album from '@/view/Album/Album.vue';
	import Broad from '@/view/Broad/Broad.vue';
	import UserList from '@/view/UserList/UserList.vue';
	import {
		_getRecentSong,
		_getTimeMachine
	} from '@/http/mine.js';
	export default {
		// 注册组件
		components: {
			play,
			BroadList,
			Single,
			SongList,
			VodioList,
			AristList,
			Album,
			Broad,
			UserList
		},
		data() {
			return {
				current: 0, //下标值
				tabs: [{
						name: '歌曲',
						limit: 60,
						key: 'song',
						list: [],

					},
					{
						name: '视频',
						limit: 100,
						key: 'video',
						list: [],
					},
					{
						name: '歌单',
						limit: 300,
						key: 'playlist',
						list: [],
					},
					{
						name: '专辑',
						limit: 3,
						key: 'album',
						list: [],
					},
					{
						name: '播客',
						key: 'dj',
						limit: 300,
						list: [],
					},
				], //tab切换栏
				currentpage: 1, //当前页数
				PageCount: 30, //每页条数
			};
		},
		methods: {
			// 回到上一级
			goback() {
				uni.switchTab({
					url: "/pages/Mine/index"
				})
			},
			change(item) {
				this.current = item.index
				this._getmylist()
			},
			changCurrent(e) {
				this.current = e.detail.current
				this._getmylist()
			},

			async _getmylist() {
				const el = this.tabs[this.current];
				if (el.isGet && el.pageNo >= el.total) {
					uni.showToast({
						title: "没有更多了",
						icon: "none",
						mask: true,
					})
					return
				}
				uni.showLoading()
				const {
					data: res
				} = await _getRecentSong(el.key, el.limit);
				// const total = res.total
				const list = res.list
				// this.tabs[this.current].total = Math.ceil(total / 30)
				// this.tabs[this.current].list.push(...list)

				// 对list进行遍历，只要data里面的数据  不然数据对不上
				list.forEach((obj) => {
					var obje = {};
					obje = obj.data
					this.tabs[this.current].list.push(obje)
				})
				uni.hideLoading()
			},

			async TimeMachine() {
				const res = await _getTimeMachine()
				// console.log(res);
			}

		},

		created() {
			this._getmylist()
			this.TimeMachine()
		}
	}
</script>

<style lang="scss" scoped>
	.pages {
		background-color: #f6f6f6;
		font-family: STXihei;
	}

	.nav-bar {
		height: 75rpx;
		padding-right: 30rpx;
		font-family: STXihei;

		&-content {
			background-color: #fff;
			height: 85rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			// margin: 0 30rpx;
			position: fixed;
			width: 100%;


			&-back {
				margin-left: 30rpx;
				display: flex;
				align-items: center;

				&-title {
					margin-left: 30rpx;
					font-size: 30rpx;
				}
			}

			&-bottom {
				margin-right: 30rpx;
			}

			.custom-style {
				height: 50rpx;
				background-color: #260000;
			}
		}
	}

	.tabs-active {
		height: 90rpx;
		background-color: #fff;
		paddding-left: 40rpx;

		&-content {
			width: 100%;
			position: fixed;
			border: 1px solid red;
			left: 15rpx;

		}
	}



	.swiper-info {
		height: calc(100vh - 84px);

		&-scroll {
			margin-top: 10px;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			padding: 0 5rpx;
			height: calc(100vh - 114px);


			&-item {
				height: 100vh;

				&-scroll {
					margin-top: 10px;
					-webkit-box-sizing: border-box;
					-moz-box-sizing: border-box;
					box-sizing: border-box;
					padding: 0 5rpx;

					&-next {
						font-size: 26upx;
						background-color: #fff;
						display: flex;
						justify-content: center;
						align-items: center;
						padding: 10rpx 0;
						border-bottom-left-radius: 10px;
						border-bottom-right-radius: 10px;
						margin: 0 15px;
					}
				}
			}
		}
	}

	// 歌曲
	.sing {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 40rpx 30rpx;
		// touch-action: none;

		&-info {
			&-name {
				font-size: 18rpx;
				color: #ccc;
				// display: flex;
			}
		}

		&-icon {
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 55rpx;
				height: 55rpx;
			}
		}

	}

	// 视频
	.video {
		margin: 30rpx 30rpx;
		display: flex;
		align-items: center;

		image {
			width: 160rpx;
			height: 120rpx;
			border-radius: 15rpx;
		}

		&-title {
			margin-left: 30rpx;
			display: flex;
			flex-direction: column;
			// align-items: center;

			text {
				font-size: 15rpx;
				color: #ccc;
			}

			.paly-msg {
				display: flex;
				justify-content: space-between;
			}
		}
	}

	// 声音
	.voice {
		margin: 15rpx 30rpx;
		display: flex;
		align-items: center;

		image {
			width: 120rpx;
			height: 120rpx;
			border-radius: 15rpx;
		}

		&-title {
			display: flex;
			align-items: center;

			&-txt {
				line-height: 40rpx;
				margin-left: 30rpx;
			}
		}
	}


	// 歌单
	.playlist {
		margin: 30rpx 30rpx;
		display: flex;
		align-items: center;

		&-center {
			display: flex;
			flex-direction: column;
			flex: 1;
			margin: 0 15rpx;
			overflow: hidden;


			&-tx1 {
				font-size: 30rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			&-tx2 {
				font-size: 15rpx;
				color: #6d6d6d;
			}
		}

		&-left,
		&-right {
			width: 100rpx;
			height: 100rpx;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 15rpx;
			}
		}
	}


	// 专辑
	.album {
		margin: 30rpx 30rpx;
		display: flex;
		align-items: center;

		&-center {
			display: flex;
			flex-direction: column;
			flex: 1;
			margin: 0 15rpx;
			overflow: hidden;


			&-tx1 {
				font-size: 30rpx;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
			}

			&-tx2 {
				font-size: 15rpx;
				color: #6d6d6d;
			}
		}

		&-left,
		&-right {
			width: 100rpx;
			height: 100rpx;

			image {
				width: 100rpx;
				height: 100rpx;
				border-radius: 15rpx;
			}
		}
	}
</style>
